<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>医生评价</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/milligram.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css" />

    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/js/jQueryCode.js}"></script>
    <script src="/js/comment.js" type="text/javascript"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <style type="text/css">
        *{margin:0;padding:0;list-style-type:none;}
        a,img{border:0;}
        body .container{font:12px/180% Arial, Helvetica, sans-serif;}
        /*quiz ：求助模块  */
        .quiz{border:solid 1px #ccc;
            height:auto;
            width:772px;
        }
        .quiz table tr.tab-info-tr th{width:auto;text-align:left;padding-left:20px;padding-right:0;}
        .quiz h3{font-size:14px;
        line-height:35px;
        height:35px;
        border-bottom:solid 1px #e8e8e8;
        padding-left:20px;
        background:#f8f8f8;
        color:#666;
        position:relative;}
        /* 求助包含的内容 */
        .quiz_content{padding:10px 20px 0 20px;position:relative;height:auto;}
        /* 按钮图标设置 */
        .quiz_content .btm{border:none;margin-top:30px;margin-right:25px;width:auto;height:auto;display:inline;cursor:pointer;background-color: #f62459}
        .quiz_content .btm:hover{background-color: #cf000f !important;color:#fff !important;}
        .quiz_content li.full-comment{position:relative;z-index:99;height:41px;}
        .quiz_content li.cate_l{height:24px;line-height:24px;padding-bottom:10px;}
        .quiz_content li.cate_l dl dt{float:left;}
        .quiz_content li.cate_l dl dd{float:left;padding-right:15px;}
        .quiz_content li.cate_l dl dd label{cursor:pointer;}
        .quiz_content .l_text{height:auto;position:relative;padding-left:18px;}
        .quiz_content .l_text .m_flo{float:left;width:47px;}
        .quiz_content .l_text .text{width:634px;height:109px;border:solid 1px #ccc;}
        .quiz_content .l_text .tr{position:absolute;bottom:-18px;right:40px;}
        /*goods-comm-stars style*/
        .goods-comm{height:60px;position:relative;z-index:7;}
        .goods-comm-stars{line-height:25px;padding-left:12px;height:41px;position:absolute;top:0;left:10px;width:400px;}
        .goods-comm-stars .star_l{float:left;margin-right:5px;display:inline;}
        .goods-comm-stars .star_choose{float:left;display:inline-block;}
        /* rater star */
        .rater-star{position:relative;list-style:none;margin:0;padding:0;background-repeat:repeat-x;background-position:left top;float:left;}
        .rater-star-item, .rater-star-item-current, .rater-star-item-hover{position:absolute;top:0;left:0;background-repeat:repeat-x;}
        .rater-star-item{background-position: -100% -100%;}
        .rater-star-item-hover{background-position:0 -48px;cursor:pointer;}
        .rater-star-item-current{background-position:0 -48px;cursor:pointer;}
        .rater-star-item-current.rater-star-happy{background-position:0 -25px;}
        .rater-star-item-hover.rater-star-happy{background-position:0 -25px;}
        .rater-star-item-current.rater-star-full{background-position:0 -72px;}
        /* popinfo */
        .popinfo{display:none;position:absolute;top:30px;background:url(/asserts/images/comment/infobox-bg.gif) no-repeat;padding-top:8px;width:192px;margin-left:-14px;}
        .popinfo .info-box{border:1px solid #f00;border-top:0;padding:0 5px;color:#F60;background:#FFF;}
        .popinfo .info-box div{color:#333;}
        .rater-click-tips{
            position:absolute;
            top:-5px;
            left:200px;
            line-height: 25px;
            font-size: 12px;
            color:#333;margin-left:10px;background:url(/asserts/images/comment/infobox-bg-l.gif) no-repeat 0 0;width:125px;height:34px;padding-left:16px;overflow:hidden;}
        .rater-click-tips span{display:block;background:#FFF9DD url(/asserts/images/comment/infobox-bg-l-r.gif) no-repeat 100% 0;height:34px;line-height:34px;padding-right:5px;}
        .rater-star-item-tips{background:url(/asserts/images/comment/star-tips.gif) no-repeat 0 0;height:41px;overflow:hidden;}
        .cur.rater-star-item-tips{display:block;}
        .rater-star-result{color:#FF6600;font-weight:bold;padding-left:70px;float:left;position:relative;top:-20px;}
        .eval-form-input {border: none;padding: 0;margin: 0;background-color: #e4e9ed;}
        .eval-form-input:focus {outline: none;-webkit-box-shadow: none; -moz-box-shadow: none;box-shadow: none;}
        .eval-form-input:hover{cursor: default;}
        /*.quiz table,.quiz table tr{width:100%;}*/
        /*.quiz table tr.tab-info-tr th{padding-left:20px;}*/
    </style>
</head>
<body>
<div class="top-nav animation-bg-color-skyblue">
    <div class="logo">
        <a href="#"><img th:src="@{/img/logo.png}" /></a>
    </div>
    <div class="account-check fr">
        <div class="before-login">
            <a class="a-btn animation" href="/user/login">
                <span class="icon-enter"></span>登录
            </a>
            <a class="a-btn animation" href="/user/register">
                <span class="icon-user-plus"></span>注册
            </a>
        </div>
        <div class="after-login hide">
            <!--<a class="a-btn animation fr" href="#">-->
            <!--<span class="icon-exit"></span>退出-->
            <!--</a>-->
            <h5 class="fr">欢迎登陆:13049148938</h5>
        </div>
    </div>

    <div class="s-side animation-bg-color-skyblue">
        <ul>
            <!--这部分是导航栏信息。-->
            <li class="s-firstItem first">
                <a href="/user/index">
                    <i class="fa fa-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <!--查找-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>查找</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toFindEval">
                            查找医生&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>
            <!--预约挂号-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>预约挂号</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/reservation/toReserve">
                            预约&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>

            <!--社区-->
            <li class="first">
                <div class="d-firstNav s-firstNav">
                    <i class="fa fa-bars"></i>
                    <span>社区</span>
                    <i class="fa fa-caret-right fr" ></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>文章</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toSendArticle">
                                    发表文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/community/showArticle">
                                    浏览文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>帖子</span>
                            <i class="fa fa-caret-right fr "></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toCommunity">
                                    浏览帖子&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <!--个人中心-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>个人中心</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>个人资料</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/user/userInfo">
                                    个人信息&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/password">
                                    修改密码&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/verify">
                                    实名认证&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>钱包</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/reservation/toWallet">
                                    我的钱包&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toRecharge">
                                    充值&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toBill">
                                    我的账单&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/community/toCollection">
                            我的收藏&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toMyEvaluate">
                            我的评价&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>

                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="layout">
    <div class="container">
        <!-- 在div的基础上进行功能添加 -->
        <!--保存的用户信息有：
        医生的名字：
        医院：
        科室：
        -->
        <!--ajax实现页面刷新功能-->

        <center>
            <form method="post" th:action="@{/evaluate/saveEvaluate(id=${res.id})}">
                <div class="quiz">
                    <!---------------------------------------------医生信息--------------------------------------------->
                    <table>
                        <tr class="tab-info-tr">
                            <th>医生:</th>
                            <td><input class="eval-form-input" id="e_doctorName" th:value="${res.doctorName}" name="doctorName" readonly="readonly"></td>
                            <th>科室:</th>
                            <td><input class="eval-form-input" id="e_department" th:value="${res.departmentName}" name="department" readonly="readonly"></td>
                            <th>时间:</th>
                            <td><input class="eval-form-input" id="e_time" th:value="${#dates.format(res.time, 'yyyy-MM-dd E')}" name="department" readonly="readonly"></td>
                        </tr>
                    </table>
                    <!--<br class="quiz">-->
                    <!--<p>医生:</p><input id="e_doctorName" th:value="${res.doctorName}" name="doctorName"><br>-->
                    <!--&lt;!&ndash;获取医生名字&ndash;&gt;-->
                    <!--<p>科室:</p><input id="e_department" th:value="${res.departmentName}" name="department"><br>-->
                    <!--<p>时间:</p><input id="e_time" th:value="${#dates.format(res.time, 'yyyy-MM-dd E')}" name="department"><br>-->


                    <h3>我要评论</h3>
                    <div class="quiz_content">
                        <div class="goods-comm">
                            <div class="goods-comm-stars">
                                <label class="star_l">满意度：</label>
                                <!-- 小星星 -->
                                <div id="rate-comm-1" class="rate-comm"></div>
                            </div>
                        </div>
                        <!-- 内容模块 -->
                        <div class="l_text">
                            <label class="m_flo" >内容:</label>
                            <textarea class="text" placeholder="温馨提示：完成满意度评定才能进行评论哦！" id="e_content" name="content"></textarea>
                            <!--添加js脚本-->
                            <script>
                                $(function(){
                                    /**
                                     * textarea 限制输入字数
                                     * @param string str 类名或ID
                                     * @param number num 限制输入的字数
                                     */
                                    function limitImport(str,num){
                                        $(document).on('input propertychange',str,function(){
                                            var self = $(this);
                                            var content = self.val();
                                            if (content.length > num){
                                                self.val(content.substring(0,num));
                                            }
                                            self.siblings('.tr').text("字数上限："+(200-self.val().length)+'/'+num);
                                        });
                                    }
                                    //限制字数为：
                                    limitImport('.text',200);
                                })
                            </script>

                            <span class="tr">字数上限：200/200</span>
                        </div>
                        <button class="btm fr" type="submit" id="e_submit">发表评论</button>
                        <div class="clearfix"></div>
                    </div><!--quiz_content end-->
                </div><!--quiz end-->
            </form>
        </center>
    </div>
    <div class="bubbles">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>
</div>



</body>
</html>
